<template>
  <div class="home" :style="{width:num+'px'}">
    我的宽度是10px
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item | showName}}</li>
      <!-- 如果不写key 值 当你改变其中的一个值的时候，重新把所有的循环节点渲染一遍 -->
    </ul>
  </div>
</template>

<script>


export default {
  name: 'Home',
  components: {

  },
  data(){
    return {
      num: 10,
      arr: ['花和尚','及时雨','豹子头','青面兽','行者'],
      nameFind: [
        {name:'鲁智深',val:'花和尚'},
        {name:'宋江',val:'及时雨'},
        {name:'林冲',val:'豹子头'},
        {name:'杨志',val:'青面兽'},
        {name:'武松',val:'行者'}]
    }
  },
  filters:{
    showName(val){ // this 过滤器里面 this 指向的不再是vue实例了
      let arr = [
        {name:'鲁智深',val:'花和尚'},
        {name:'宋江',val:'及时雨'},
        {name:'林冲',val:'豹子头'},
        {name:'杨志',val:'青面兽'},
        {name:'武松',val:'行者'}]
      return arr.find(item => item.val == val).name;
    }
  },
  // mvvm 
  // m => model 数据 v => view 视图 vm =>  ViewModel  
  created() {
    // let dom = document.querySelector('.home');
    // dom.style.background = 'red';
  },
  mounted() { // 
    // setInterval(() => {
    //    this.num++;
    // },1000)
    // console.log('dfghjk');
    // this.arr[4] = '武松';
    // console.log();
    // setTimeout(() => {
    //    this.$set(this.arr,4,'武松');
    // },5000)
  },
  // 我们一般，会在 created 里面去写请求，（created 执行的时候，dom还没有生成）
  // 我们一般，在mounted习惯操作dom节点（如果有需要的话，该生命周期执行的时候，dom节点已经生成）注意：一般在mounted里面去写请求的话，会造成浏览器做一定的无用功。





  // 字典值 [{state:1,val:'已付款'}，{state:2,val:'未付款'}，{state:3,val:'待发货'}]
  
}
</script>
<style>
  /* .home{
    background: red;
    color: #fff;
  } */
</style>
